<template>
    <div class="driver-task">
        <!--<div class="title">任务列表</div>-->
        <van-loading  type="spinner" color="white" v-if="myValue.isShow" style="margin: 0.5rem auto 0;"/>
        <div class="task" v-if="!myValue.isShow" style="padding: 0 0.1rem 0.1rem">
            <van-checkbox-group v-model="checkboxTask">
                <div class="card" v-for="(item,index) in myValue.driverTask" :key="index"  >
                <van-row >
                    <van-col span="24" style="display: flex;justify-content: space-between;padding-bottom: 0.04rem">
                        <div>
                            <van-checkbox :name="item.id"></van-checkbox>
                        </div>
                        <div>
                            <span>取{{item.related_pick_orders_count}}/送{{item.related_send_orders_count}}</span>
                        </div>
                    </van-col>
                    <div @click="checkDriverTaskOrder(item.id)">
                        <van-col :span="24" >
                            <van-col :span="24" class="pdb10">
                                <div style="display: flex;justify-content: space-between">
                                <span style="display: flex;">
                                    <img src="../../assets/img/shijian@2x.png" alt="" class="imgs">
                                    <span :class="parseInt(((item.limit_time_timestamp) * 1000 - nowTimeStamp)/1000/60)< 30?'color-red':''">
                                            <span class="color-red" v-if="parseInt(((item.limit_time_timestamp) * 1000 - nowTimeStamp)/1000/60) < 0">(超)</span>
                                            {{Math.abs(parseInt(((item.limit_time_timestamp) * 1000 - nowTimeStamp)/1000/60))}}min
                                    </span>
                                </span>
                                    <!--<span>取{{item.related_pick_orders_count}}/送{{item.related_send_orders_count}}</span>-->
                                </div>
                            </van-col>
                            <van-col :span="24" class="pdb10" style="display: flex;"><img src="../../assets/img/lianxir@2x.png" alt="" class="imgs"><span>[客户] {{item.docked_name}}</span></van-col>
                            <van-col :span="24" class="pdb10" style="display: flex;"><img src="../../assets/img/phone@3x.png" alt="" class="imgs"><span>{{item.docked_phone}}</span>&nbsp;</van-col>
                            <van-col :span="24" style="display: flex;"><img src="../../assets/img/dingwei@2x.png" alt="" class="imgs"><span>{{item.address}}</span></van-col>
                        </van-col>
                    </div>

                </van-row>
            </div>
            </van-checkbox-group >
            <div class="driver-task-no">
                无更多数据
            </div>
        </div>
        <!--<div class="title">无任务订单列表</div>-->
        <!--<div class="order" style="padding: 0 0.1rem">-->
            <!--<div class="card" v-for="(item,index) in myValue.driverNoTask" :key="index">-->
                <!--<van-row>-->
                    <!--<van-col span="5" class="checkbox-top">-->
                        <!--<van-checkbox :name="item.id" class="checkbox"></van-checkbox>-->
                    <!--</van-col>-->
                    <!--<van-col span="12" class="order-id">-->
                        <!--<div @click="showOrder(item.id)">{{item.full_dingdong}}</div>-->
                    <!--</van-col>-->
                    <!--<van-col span="7" class="date">-->
                        <!--<div @click="showOrder(item.id)">{{item.forecast_pickup_time.slice(11,16) + '~' +-->
                            <!--item.forecast_complete_time.slice(11,16)}}-->
                        <!--</div>-->
                    <!--</van-col>-->
                <!--</van-row>-->
                    <!--<van-row style="overflow: hidden;">-->
                        <!--<van-col span="5" class="status">{{item.status_link}}</van-col>-->
                        <!--<van-col span="9" class="product">-->
                            <!--<template v-if="item.product.type==4" style="color:red">-->
                                <!--次{{item.forecast_complete_time.slice(8,10)}}-->
                            <!--</template>-->
                            <!--<template v-else>-->
                                <!--{{item.product?item.product.title:''}}-->
                                <!--{{item.forecast_complete_time.slice(8,10)}}号-->
                            <!--</template>-->
                        <!--</van-col>-->
                        <!--<van-col span="10" class="types">{{item.res_link}} {{item.total_weight}}kg-->
                            <!--{{item.volume_link}}-->
                        <!--</van-col>-->
                    <!--</van-row>-->
                    <!--<van-row style="overflow: hidden;">-->
                        <!--<van-col span="5">-->
                            <!--<img src="../../assets/img/ji@2x.png" alt="" class="img">-->
                        <!--</van-col>-->
                        <!--<van-col span="19">-->
                            <!--<van-col span="24"><span class="name">[{{item.pick_name}}]</span>-->
                                <!--<span class="tel">{{item.pick_phone}}</span></van-col>-->
                            <!--<van-col span="24" class="address">{{item.pick_address}}{{item.pick_address_add}}</van-col>-->
                        <!--</van-col>-->
                    <!--</van-row>-->
                    <!--<van-row style="overflow: hidden;">-->
                        <!--<van-col span="5">-->
                            <!--<img src="../../assets/img/shou@2x.png" alt="" class="img">-->
                        <!--</van-col>-->
                        <!--<van-col span="19">-->
                            <!--<van-col span="24">-->
                                <!--<span class="name">[{{item.delivery_name}}]</span><span class="tel">{{item.delivery_phone}}</span>-->
                            <!--</van-col>-->
                            <!--<van-col span="24" class="address">{{item.delivery_address}}{{item.delivery_address_add}}</van-col>-->
                        <!--</van-col>-->
                    <!--</van-row>-->
                    <!--&lt;!&ndash;<van-row  style="overflow: hidden;"  v-if="item.executable_related_mission && item.executable_related_mission.length > 0 && item.inexecutable_related_mission[0]['kind'] !== 2">&ndash;&gt;-->
                    <!--<van-row style="overflow: hidden;" v-if="item.executable_related_mission && item.executable_related_mission.length > 0">-->
                        <!--<van-col span="5" style="text-align: center">-->
                            <!--任务:-->
                        <!--</van-col>-->
                        <!--<van-col :span="19">-->
                            <!--<div>-->
                                <!--<span class="tel">{{item.executable_related_mission[0]['driver']['name']}}</span>-->
                                <!--前去-->
                                <!--<span class="tel">{{item.executable_related_mission[0]['address']}}</span>-->
                            <!--</div>-->
                        <!--</van-col>-->
                    <!--</van-row>-->
                    <!--&lt;!&ndash;<van-row  style="overflow: hidden;"  v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0  && item.inexecutable_related_mission[0]['kind'] !== 2">&ndash;&gt;-->
                    <!--<van-row style="overflow: hidden;" v-if="item.inexecutable_related_mission && item.inexecutable_related_mission.length > 0">-->
                        <!--<van-col span="5" style="text-align: center">-->
                            <!--任务:-->
                        <!--</van-col>-->
                        <!--<van-col :span="19">-->
                            <!--<div>-->
                                <!--<span class="tel">{{item.inexecutable_related_mission[0]['driver']['name']}}</span>-->
                                <!--前去-->
                                <!--<span class="tel">{{item.inexecutable_related_mission[0]['address']}}</span>-->
                            <!--</div>-->
                        <!--</van-col>-->
                    <!--</van-row>-->
            <!--</div>-->
        <!--</div>-->
        <div class="dialog-footer">
            <div class="btn bgcolorfff" @click="closePopup">返回</div>
            <div class="btn bgcolorff976a" @click="cancelTask">取消任务</div>
            <div class="btn" @click="completeTask">完成任务</div>
        </div>
    </div>
</template>

<script>
    import {Row,Col,Button,Loading,Checkbox,CheckboxGroup,Toast} from 'vant';
    export default {
        name: "DiverTask",
        components: {
            [Row.name]: Row,
            [Button.name]: Button,
            [Loading.name]: Loading,
            [CheckboxGroup.name]: CheckboxGroup,
            [Checkbox.name]: Checkbox,
            [Toast.name]: Toast,
            [Col.name]: Col
        },
        props: {
            value: {
                type: Object,
                default: ()=>{
                    return {}
                }
            }
        },
        data() {
            return {
                nowTimeStamp: null,
                myValue: {},
                isShow: false,
                checkboxTask:[],
                allChecked: false
            }
        },
        computed: {
            driverTask: function (val) {
                return this.myValue.driverTask;
            }
        },
        watch: {
            checkboxTask: function (newVal,oldVal) {
                this.allChecked = false;
                if (newVal && newVal.length === 2) {
                    this.checkboxTask = [newVal[1]];
                    this.myValue.checkboxTask = this.checkboxTask;
                } else if (newVal && newVal.length === 1) {
                    this.checkboxTask = newVal;
                    this.myValue.checkboxTask = this.checkboxTask;
                } else if (newVal && newVal.length === 0)
                    this.checkboxTask = newVal;
                    this.myValue.checkboxTask = this.checkboxTask;
            },
            driverTask: function (val) {
                this.getNowDate();
            },
            value: {
                handler(val) {
                    this.myValue = this.value;
                },
                deep: true
            },
            myValue: {
                handler(val) {
                    this.$emit('input', this.myValue);
                },
                deep: true
            }
        },
        mounted() {
            this.myValue = this.value;
        },
        methods: {
            checkDriverTaskOrder(id) {
                this.$emit('operationTask',{type: 'check', id: id});
            },
            closePopup() {
                this.myValue.showPopupDriver = false;
            },
            getNowDate() {
                this.nowTimeStamp = Date.parse(new Date());
            },
            completeTask() {
                if (this.myValue.checkboxTask.length == 0) {
                    Toast({
                        message:'请选择要完成的任务',
                        duration: 1000
                    });
                    return;
                }
                this.$emit('operationTask',{type: 'complete', id: this.myValue.checkboxTask[0]});
            }, // 完成任务
            cancelTask() {
                if (this.myValue.checkboxTask.length == 0) {
                    Toast({
                        message:'请选择要取消的任务',
                        duration: 1000
                    });
                    return;
                }
                this.$emit('operationTask',{type: 'cancel', id: this.myValue.checkboxTask[0]});
            } // 取消任务
        }
    }
</script>

<style scoped lang="less">
    .driver-task{
        width: 100%;
        padding: 0 0 0.8rem;
        .title{
            width: 100%;
            height: 0.4rem;
            font-size: 0.16rem;
            text-align: center;
            line-height: 0.4rem;
            background-color: #fff;
            color: #000;
        }
        .van-checkbox__icon, .van-checkbox__label{
            margin-left: 0rem;
        }
        .pdb10{
            padding-bottom: 0.05rem;
        }
        .imgs{
            width: 0.16rem;
            height: 0.16rem;
            position: relative;
            top: 0.01rem;
            margin-right: 0.1rem;
        }
        .task{
            .card {
                margin: 0.08rem auto 0rem;
                padding: 0.12rem 0.22rem 0.12rem 0.12rem;
                box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.18);
                border-radius: 10px;
                background-color: #fff;
            }
        }
        .order{
            .card {
                /*width: 3.59rem;*/
                margin: 0.08rem auto 0rem;
                padding: 0.12rem 0.22rem 0.12rem 0;
                box-shadow: 0 0.02rem 0.06rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.04), 0 0.01rem 0.02rem 0 rgba(0, 0, 0, 0.18);
                border-radius: 10px;
                background-color: #fff;
                .checkbox {
                    position: relative;
                    top: 0px;
                    left: 0px;
                    z-index: 9;
                    height: 0.26rem;
                }
                .address {
                    font-size: 0.14rem;
                    color: #4A4A4A;
                }
                .order-id {
                    font-size: 0.18rem;
                }
                .name {
                    color: #727072;
                    font-size: 0.14rem;
                    padding-right: 0.1rem;
                }
                .types {
                    font-size: 0.12rem;
                    text-align: right;
                    color: #9B9B9B;
                    line-height: 0.22rem;
                }
                .product {
                    color: #1F4BA5;
                    font-size: 0.12rem;
                    line-height: 0.22rem;
                }
                .tel {
                    color: #4A90E2;
                    font-size: 0.14rem
                }
                .date {
                    text-align: right;
                    font-size: 0.18rem;
                }
                .status {
                    text-align: center;
                    line-height: 0.22rem;
                }
                .checkbox {
                    text-align: center;
                }
                .img {
                    width: 0.3rem;
                    height: 0.28rem;
                    margin: 0.04rem auto 0;

                }
            }
        }
        .color-red{
            color: red;
        }
        .driver-task-no{
            color: rgb(170, 170, 170);
            text-align: center;
            margin-top: 0.2rem;
            font-size: 0.16rem;
        }
        .dialog-footer{
            position: fixed;
            bottom: 0px;
            left: 0px;
            display: flex;
            z-index: 1000;
            justify-content: space-between;
            /*padding: 0.06rem 0;*/
            background-color: #fff;
            width: 100%;
            height: 0.47rem;
            box-shadow: 0 2px 9px 0 rgba(0,0,0,0.43);
            .btn {
                width: 50%;
                height: 0.47rem;
                background: #108EE9;
                font-size: 0.16rem;
                color: #FFF;
                text-align: center;
                line-height: 0.47rem;
            }
            .bgcolorff976a{
                background-color: #ff976a;
            }
            .bgcolorfff{
                background-color: #fff;
                color: #000;
            }
        }
    }

</style>
